/* html-ized markdown */
/* designed originally by uxamanda (https://discourse.joplinapp.org/u/uxamanda). latest version https://github.com/amandamcg/joplin-theme */
/* Redesigned by Stephen (robotcorner) https://https://github.com/robotcorner/joplin-theme-dark-gruvbox */

:root {
    --white: #fbf1c7;
    --dark-white: #ebdbb2;
    --light-grey: #928374;
    --grey: #504945;
    --dark-grey: #3c3836;
    --darker-grey: #32302f;
    --black: #181a1b;
    --red: #fb4934;
    --red-dark: #cc241d;
    --green: #b8bb26;
    --green-dark: #6ebb26;;
    --yellow:#fabd2f;
    --yellow-dark: #d79921;
    --blue: #83a598;
    --blue-dark: #458588;
    --purple: #d3869b;
    --purple-dark: #b16286;
    --aqua: #8ec07c;
    --aqua-dark: #689d6a;
    --orange: #fe8019;
    --orange-dark: #d65d0e;
    --base-size-1: 1px;
    --base-size-4: 5px;
    --base-size-8: 9px;
    --base-size-11: 11px;
    --base-size-13: 13px;
    --base-size-14: 14px;
    --base-size-15: 15px;
    --base-size-16: 16px;
    --base-size-17: 17px;
    --base-size-18: 18px;
    --base-size-18: 19px;
    --base-size-24: 24px;
    --base-size-32: 32px;
    --base-size-40: 40px;
    --base-size-272: 272px;
    --z-toc: 99;
    --font-weight-light: 200;
    --font-weight-base: 400;
    --font-weight-base-extra: 500;
    --font-weight-bold: 600;
    --font-title: "Work Sans";
    --font-sans: "Work Sans";
    --font-mono: "Cascadia Code";
    --primary: var(--yellow);
    --secondary: var(--yellow);
    --font-line-height: 1.4em;
    --font-size: var(--base-size-17);
    --icon-size: var(--font-size);
}

.hljs {
    background-color: black;
    padding: var(--base-size-18);
    border-radius: var(--base-size-4) !important;
}

#rendered-md {
    padding: 6%;
}

body {
    font-family: var(--font-sans) !important;
    font-weight: var(--font-weight-base) !important;
    color: var(--dark-white);
    background-color: var(--black);
    font-size: var(--font-size);
}

p, h1, h2, h3, h4, h5, h6, ul, table {
    margin-top: 0;
}

h1, h2, h3, h4 {
    font-family: var(--font-title);
    font-weight: var(--font-weight-light) !important;
    letter-spacing: 0.01em;
    margin-top: var(--base-size-24);
}

h1 {
    font-size: calc(var(--font-size)*2) !important;
    line-height: var(--font-line-height) !important;
    margin-top: var(--base-size-40) !important;
    border-bottom: none !important;
    font-weight: bold !important;
}

h1:first-child {
    margin-top: 0px !important;
}

h2 {
    font-size: calc(var(--font-size)*1.6) !important;
    font-weight: bold !important;
}

h3 {
    font-size: calc(var(--font-size)*1.4) !important;
    font-weight: bold !important;
}

h4 {
    font-size: calc(var(--font-size)*1.3) !important;
    font-weight: bold !important;
}

p, li {
    /* font-weight: var(--font-weight-base) !important; */
    letter-spacing: .03em;
    color: var(--dark-white);
    margin-bottom: var(--base-size-24);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

ol li, ul li {
    margin-bottom: var(--base-size-4);
}

ul ul {
    /* list-style-type: cjk-heavenly-stem; */
    list-style-type: disc;
}

hr {
    padding: var(--base-size-24) !important;
}

blockquote {
    font-style: italic !important; 
    opacity: 1;
    border-radius: 10px !important;
    border-left: 6px solid var(--white);
    background-color: var(--darker-grey);
    padding-right: 8px;
}

.md-checkbox {
    margin-left: 0 !important;
}

.md-checkbox .checkbox-wrapper {
    align-items: flex-start;
}

.md-checkbox input[type="checkbox"i] {
    margin-left: -24px !important;
    opacity: 0.8 !important;
    margin-top: 7px;
    border: var(--base-size-1) solid var(--secondary);
}

.md-checkbox input[type=checkbox]:checked {
    opacity: 0.3 !important;
    text-decoration: line-through;
    ;
}

a, summary {
    text-decoration: none !important;
    padding: 0 0 var(--base-size-4) 0 !important;
    color: var(--secondary) !important;
    font-weight: var(--font-weight-bold) !important;
}

a:hover {
    border-bottom: var(--base-size-1) dashed var(--secondary) !important;
}

a[data-resource-id] {
    color: var(--dark-green) !important;
    /* change the colour of INTERNAL links */
    /* https://discourse.joplinapp.org/t/share-your-css/1730/65 */
}

a[data-resource-id] :hover {
    border-bottom: var(--base-size-1) dashed var(--primary) !important;
}

/* joplin icon in joplin link */
.resource-icon {
    background-color: var(--primary) !important;
    width: 0.75em;
    height: 0.9em;
    top: 0.1em;
}

/*
```
code blocks
```
*/
pre {
    font-family: var(--font-mono) !important;
}

/* ```inline code``` */
.inline-code {
    font-family: var(--font-mono) !important;
    font-size: var(--base-size-15) !important;
    padding: .3em .6em !important;
    border-radius: var(--base-size-4) !important;
    background-color: #040404 !important;
    border: none !important;
    color: var(--aqua) !important;
}

/* ==emphasis== */
mark {
    padding: 0 var(--base-size-4) !important;
    background-color: var(--yellow-dark);
}

/*Bold*/
strong {
    color: var(--green-dark) !important;
    font-weight: var(--font-weight-bold);
}

nav.table-of-contents>ul {
    top: 0;
    right: 0;
    position: fixed;
    z-index: var(--z-toc);
    background: var(--dark-grey);
    padding: var(--base-size-8);
    border-radius: var(--base-size-4);
    max-width: 15%;
    font-size: calc(var(--font-size)/1.3) !important;
    max-height: var(--base-size-272);
    overflow: scroll;
    opacity: 0.8;
}

nav.table-of-contents ul {
    list-style-type: none;
    margin-left: var(--base-size-4);
}

nav.table-of-contents li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

nav.table-of-contents li a {
    padding: 0;
    color: var(--light-grey) !important;
}

@media all and (min-width: 920px) {
    nav.table-of-contents>ul {
        height: 100%;
        max-height: 100%;
    }

    #rendered-md {
        width: 75%;
    }
}

b-gray, b-green, b-red, b-blue, b-orange, b-pink, b-purple {
    width: 90%;
    display: block;
    margin-left: 20px; 
    padding: 10px;
    border: 1px solid;
    border-left: 5px solid;
    border-radius: 2px; 
    word-wrap: break-word;
    box-shadow: 3px 3px 7px 0 rgba(255,255,255,0.7) ;
	color: #000000;
}


b-gray {
    border-color: #b1bcc2;
    background-color: #e9edf0; 
 }

b-green {
    border-color: #5fa04e;
    background-color: #c5e5b4; 
} 


b-red {
    border-color: #f65354;
    background-color: #fad3d4; 
}

b-blue {
    border-color: #229ade;
    background-color: #bbe5fb; 
}

b-orange {
    border-color: #cf7506;
    background-color: #faf3d3; 
}

b-purple {
    border-color: #af74e8;
    background-color: #ead9fb; 
}

b-pink {
    border-color: #ed5393;
    background-color: #fad3e5; 
}
/**/

/* TESTING BELOW */
/* code mirror */

.cm {
    font-family: var(--font-sans);
    font-size: var(--font-size);
}

/* background and base color */
.cm-s-material-darker.CodeMirror {
    background-color: var(--black) !important;
    color: var(--light-grey) !important
}

/* lists */
.cm-s-material-darker .cm-variable-2 {
    color: var(--light-grey) !important
}

/* internal links */
.cm-s-material-darker .cm-string {
    color: var(--primary) !important
}

/* headers */
.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4 {
    color: var(--dark-white) !important
}

.cm-variable-2, .cm-meta {
    color: var(--red-dark) !important;
   /* changes the font colour for all lists (.cm-meta controls the checkbox square brackets [ ] ) */
}
.cm-comment {
    color: var(--green-dark) !important;
   /* changes the font colour for code text*/
}
.cm-quote {
    color: var(--purple-dark) !important;
   /* changes the font colour for quoted text*/
}
.cm-image-marker {
    color: var(--red);
   /* changes the font colour for the "!" before displayed image links */
    font-weight: 900;
   /* changes the font weight for the "!" before displayed image links */
}
.cm-link, .cm-url {
/* .cm-link is everything in the square brackets | .cm-url is the url itself in the round brackets */
    color: var(--green) !important;
   /* changes the font colour for links */
    text-decoration: none !important;
   /* removes underlining for links */
}
.cm-tag, .cm-attribute {
/* HTML - .cm-tag is the HTML tag itself such as "<img>" | .cm-attribute is any HTML tag attributes such as "width" or "src" */
/* the below are NOT applied if the html text is marked as "code" unless it is in a fenced html code block (```HTML) */
    color: var(--dark-purple) !important;
   /* changes the font colour for HTML tags */
    font-weight: 500;
   /* changes the font weight for HTML tags */
}
.cm-hr {
    color: var(--orange-dark) !important;
   /* changes the font colour for horizontal rule markdown "***" */
    font-weight: 900;
   /* changes the font weight for horizontal rule markdown "***" */
}